<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { $t } from '@/locales';
import { useLoading } from '~/packages/hooks';
// Import the API function for system metrics
import { getSystemMetricsCurrent } from '@/service/api/system-data';
// Import GradientBg using the index file in components directory
import { GradientBg } from './components';
import { createLogger } from '@/utils/logger';

const logger = createLogger('DiskUsageCard'); // Changed logger name

defineOptions({ name: 'DiskUsageCard' }); // Changed component name

const { loading, startLoading, endLoading } = useLoading(false);
const value = ref<number | null>(null);
const unit = ref<string>('');
let intervalId: number | null = null;

// Fetches system metrics data
const fetchData = async () => {
  startLoading();
  try {
    const response = await getSystemMetricsCurrent();
    logger.info('System Metrics Response:', response);

    // Extract Disk usage from the response data
    const diskUsagePercent = response?.data?.disk_usage;

    if (typeof diskUsagePercent === 'number') {
      value.value = parseFloat(diskUsagePercent.toFixed(1)); // Keep one decimal place
      unit.value = '%'; // Set unit to percentage
    } else {
      logger.warn('Disk usage percentage not found or not a number in response:', response);
      value.value = null;
      unit.value = '';
    }
  } catch (error) {
    logger.error('Error fetching system metrics:', error);
    value.value = null;
    unit.value = '';
  } finally {
    endLoading();
  }
};

// Fetch data on mount and set interval
onMounted(() => {
  fetchData();
  intervalId = window.setInterval(fetchData, 30000);
});

// Clear interval on unmount
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});

</script>

<template>
  <!-- Changed gradient colors to orange -->
  <GradientBg class="card-wrapper" start-color="#fb923c" end-color="#f97316">
    <h3 class="text-16px">{{ $t('card.diskUsage') }}</h3> <!-- Changed title key -->
    <div class="flex justify-between items-center pt-30px">
      <SvgIcon icon="ant-design:hdd-outlined" class="text-32px" /> <!-- Changed Icon -->
      <div class="flex flex-col items-end">
        <template v-if="loading">
           <span class="text-30px text-white dark:text-dark">{{ $t('card.loading') }}</span>
        </template>
        <template v-else-if="value !== null">
          <CountTo
            :start-value="0"
            :end-value="value"
            :suffix="unit"
            class="text-30px text-white dark:text-dark"
          />
        </template>
         <template v-else>
          <span class="text-20px text-white dark:text-dark">{{ $t('card.noData') }}</span>
        </template>
      </div>
    </div>
  </GradientBg>
</template>

<style scoped>
.card-wrapper {
  width: 100%;
  height: 100%;
  min-width: max-content;
  min-height: max-content;
}
</style> 